<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="box"><span>我是span</span>我是div</div>
    <script>
      //常用的dom操作: 第一步 获取元素  第二步 操作元素
      //一.innerHTML : 获取或者设置元素的超文本;
      //1.获取元素的超文本
      //   var boxEle = document.querySelector(".box");
      //   document.onclick = function () {
      //     console.log(boxEle.innerHTML);
      //   };

      //2.设置元素里的超文本
      //注意:会覆盖元素里之前的内容,会解析超文本
      // var boxEle = document.querySelector(".box");
      // document.onclick = function () {
      //点击文档的时候会执行修改boxEle的内容
      // boxEle.innerHTML = "修改了";
      //   boxEle.innerHTML = "<h1>修改了标题</h1>";
      // };

      //二.innerText : 获取或者设置元素的文本内容
      //1.获取文本
      // var boxEle = document.querySelector(".box");
      // document.onclick = function () {
      //   console.log(boxEle.innerText); //只会获取元素李的文字,包含子元素的文字
      // };
      //如果是文本内容 既可以使用innerHTML 也可以使用innerText
      //如果是超文本,就只能使用innerHTML

      //设置文本
      //注意:会覆盖之前的内容,不会解析超文本
      var boxEle = document.querySelector(".box");
      document.onclick = function () {
        // boxEle.innerText = "修改了";
        // boxEle.innerText = "<h1>我是标题</h1>";
        boxEle.innerHTML = "<h1>我是标题</h1>";
      };

      /*
      // 对象数组
        var arr =    [{
                name:张三,
                age:20
            },{
                name:李四,
                age:20
            },
        {
             name:王五,
            age:20
        },{
             name:王小二,
            age:20
        }]
    // 根据上面的数据 ，生成 table 一个对象是一个tr 对象里的字段对应一个td
    
    |  姓名  |年龄 |
    |  张三  | 20  |
    |  李四  | 20  |
    |  王五  | 20  |
        
        
        
        */
      // var  arr = ["张三","李四","王五"];  // 生成li里显示出来
    </script>
  </body>
</html>
